<template>
	<view class="awga-background" style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:30;"
	    :style="{
			transform:show?'translateX(0)':'translateX(100%)',
			background:content?'rgba(0, 0, 0, 0.5)':'rgba(0, 0, 0, 0)'
		}"
	>
		
		

		
		
		
		<view class="awga-transform" style="width:750upx;height:934upx;
		background-color:#fff;display: flex;flex-direction: column;"
		    :style="{
				transform:content?'translateY(0)':'translateY(-100%)'
			}"
		>
			
			<view style="flex: 1;padding: 40upx;padding-bottom: 20upx;padding-right: 20upx;">
				
				<scroll-view style="height:752upx;" :scroll-y="true">
					
					<view style="display:flex;flex-direction:row;flex-wrap:wrap;">
						<block v-for="(item,index) in levelArr" :key="index">
							<view @click="levelClick((index<=userLevel),index)" class="awga-guan-bg" :class="[
								index<=userLevel?'awga-guan-bg-ok':'awga-guan-bg-no'
							]">
								<view style="font-weight:bold;color:#2C405A;" :style="{
									fontSize:parseInt(50-(index*0.1))+'rpx'
								}">{{index+1}}</view>
							</view>
						</block>
					</view>
					
					<view v-if="levelInstructions" style="text-align:center;margin-bottom:20upx;
					font-size:24upx;color:#2C405A;">{{levelInstructions}}</view>
					
				</scroll-view>
				
			</view>
			
			<view style="display: flex;justify-content: center;align-items: center;margin-bottom:40upx;">
				<view @click="awgaHide" style="background-color:#fbbd08;border-radius:100px;text-align:center;width:240upx;">
					<view style="padding:16upx;color:#2C405A;font-size: 30upx;">
						收起
					</view>
				</view>
			</view>	
			
			
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="show" style="position: absolute;bottom:0upx;left:70upx;">
				<ad-custom :unit-id="adGridYi"></ad-custom>
			</view>
			<!-- #endif -->
			
			
		</view>
		
		
	</view>
</template>

<script>
	import siteinfo from "./siteinfo.js";
	export default {
		name: "haichongLevel",
		data() {
			return {
				
				adGridYi: siteinfo.adGridYi,
				
				levelInstructions: siteinfo.levelInstructions,
				userLevel: siteinfo.userLevel,
				levelArr: siteinfo.levelArr,
				
				show: false,
				content: false
			};
		},
		beforeDestroy(){
		},
		created() {
		},
		methods: {
			updateLevel: function(e){
				this.userLevel = parseInt(e);
			},
			levelClick: function(e,index){
				if(e){
					this.$emit('levelIndex',index);
					this.awgaHide();
				}
			},
			awgaShow: function(){
				this.show = true;
				this.content = true;
			},
			awgaHide: function() {
				var _me = this;
				_me.content = false;
				setTimeout(() => {
					_me.show = false;
				},300);
			}
		}
	}
</script>

<style scoped>
	
	.awga-guan-bg{
		width: 118upx;
		height: 118upx;
		margin-bottom: 20upx;
		margin-right: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('');
		background-repeat:no-repeat;
		background-size:236upx 118upx;
	}
	.awga-guan-bg-no{
		background-position: 0upx 0upx;
		filter: grayscale(100%)
	}
	.awga-guan-bg-ok{
		background-position: -118upx 0upx;
	}
	
	.awga-transform{
		transition-timing-function: ease;
		transition-duration: 0.3s;
		transition-property: transform;
	}
	.awga-background{
		transition-timing-function: ease;
		transition-duration: 0.3s;
		transition-property: background;
	}
	
</style>
